<template>
	<view class="biao">
		<text>{{formData.car_carNumber}}</text>
	</view>
  <view class="list-container">
	  <view style="margin: 10rpx;">
	  <image src="/photo/zhaohuo/diandian.png" mode="" 
	  style="width: 40rpx;height: 80rpx;margin-top: 17rpx;"></image>
	  </view>
	     <view style="display: flex;flex-direction: column; margin-top: 5rpx; ">
         <text style="margin: 10rpx;">{{ formData.shipping_station_name}}-{{formData.shipping_station_address}}</text>
		 <text style="margin: 10rpx;">{{ formData.unloading_station_name}}-{{formData.unloading_station_address}}</text>
		 </view>
  </view>
  <view class="yun">
   <text class="fei">运费单价</text>
   <text class="dun">{{formData.unitprice}}/吨</text>
  </view>
  <view class="container">
      <view class="item" v-for="item in items" :key="item.label">
        <text class="label">{{ item.label }}</text>
        <text class="value">{{ item.value }}</text>
      </view>
</view>
<view class="container">
      <view class="item" v-for="item in items1" :key="item.label">
        <text class="label">{{ item.label }}</text>
        <text class="value">{{ item.value }}</text>
      </view>
</view>
 <view class="container2">
    <button class="correct-btn" @click="xg()">信息准确</button>
    <button class="incorrect-btn" @click="xg1()">信息有误</button>
  </view>
</template>

<script setup>
import {
  onLoad,
  onShow
} from '@dcloudio/uni-app';
import {
  http
} from '@/config/requst.js';
import {
  userStore
} from "@/stores/user";
//引入拦截器
import '@/config/requst.js'
import { ref } from 'vue';
const formData = ref({});

//查询订单信息
const dd = async (obj) => {
  const res = await http({
    url: '/orders/selectOrder/'+obj,
  })
  formData.value = res.shuju
  console.log("------------")
  console.log(formData.value)
  ww()
}
//确认信息无误
const xg = async () => {
  const res = await http({
    url: '/orders/finish/'+formData.value.id
  })
  if (res.code == 20031){
    //跳转到结束页面
    uni.navigateTo({
      url: '/pages/cheng/cheng'
    })
  }else{
    uni.showToast({
      title: res.msg,
      duration: 2000,
      icon: 'error'
    });
  }
}
//信息有误
const xg1 = async () => {
  uni.showModal({
    title: '提示',
    content: '确定取消运单吗？',
    success: async (res) => {
      if (res.confirm) {
        //跳转页面
        uni.switchTab({
          url: '/pages/transport/transport'
        })
      }
    }
  })
}
onShow(()=>{
  let i = userStore().user.id
  dd(i)
})
const ww = () =>{
  items.value=[
    { label: '装车毛重', value: '35.00吨' },
    { label: '装车净重', value: formData.value.actualSum }
  ]
  items1.value =[
    { label: '卸车净重', value: formData.value.unloadSum },
    { label: '卸车毛重', value: formData.value.actualSum },
    { label: '亏吨', value: (formData.value.actualSum-formData.value.unloadSum) }
  ];
}
const items = ref([
  { label: '装车毛重', value: '35.00吨' },
  { label: '装车净重', value: '' }
]);
const items1 = ref([
  { label: '卸车净重', value: ''},
  { label: '卸车毛重', value: '' },
  { label: '亏吨', value: '' }
]);
</script>

<style   scoped>
	
	.container2 {
	  display: flex;
	  flex-direction: column;
	  align-items: center;
	  padding: 20px;
	}
	
	.correct-btn, .incorrect-btn {
	  width: 320px;
	  height: 40px;
	  border-radius: 20px;
	  font-size: 16px;
	  margin: 10px 0;
	}
	
	.correct-btn {
	  background-color: #003399;
	  color: white;
	  border: none;
	}
	
	.incorrect-btn {
	  background-color: white;
	  color: #ff0000;
	  border: 2px solid #ff0000;
	}
	.container {
	  padding: 20px;
	  font-size: 16px;
	}
	
	.item {
	  display: flex;
	  justify-content: space-between;
	  margin-bottom: 10px;
	}
	
	.label {
	  font-size: 35rpx;
	  color: #666;
	}
	
	.value {
	  font-size: 35rpx;
	  color: #333;
	}
	.yun{
		border-bottom: 1px solid #f0f0f0;
		display: flex;
		justify-content: space-between;
	}
	.biao{
		margin-left: 40rpx;
		font-size: 35rpx;
		
	}
.list-container {
	display: flex;
  padding: 20px;
}
.fei{
	margin-left: 40rpx;
}
.dun{
	margin-right: 40rpx;
}

ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.list-item {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 10px;
}

.list-item.blue .dot {
  background-color: blue;
}

.list-item.yellow .dot {
  background-color: yellow;
}

span {
  font-size: 16px;
}
</style>